<template>
    <div>
        <h1>会员添加</h1>
    </div>
    <table class="table table-bordered">
        <tbody>
            <tr>
                <td>会员名称</td>
                <td><input type="text" v-model="info.userName"></td>
            </tr>
            <tr>
                <td>会员密码</td>
                <td><input type="password" v-model="info.userPass"></td>
            </tr>
            <tr>
                <td>会员头像</td>
                <td>
                    <input type="file" @change="img">
                    <img :src="info.userImg" width="60px" height="60px">
                </td>
            </tr>
            <tr>
                <td>会员年龄</td>
                <td><input type="text" v-model="info.userAge"></td>
            </tr>
            <tr>
                <td>会员等级</td>
                <td>
                    <select v-model="info.userVipName">
                        <option value="普通会员">普通会员</option>
                        <option value="白银会员">白银会员</option>
                        <option value="黄金会员">黄金会员</option>
                        <option value="至尊会员">至尊会员</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>会员手机号</td>
                <td><input type="text" v-model="info.userPhone"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="确定" @click="add()"></td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

let info: any = reactive({
    "userName": "",
    "userPass": "",
    "userImg": "",
    "userAge": '',
    "userVipName": "",
    "userPhone": "",
})

const add = () => {

    axios({
        url: 'https://localhost:7173/api/User/UserAdd',
        method: 'post',
        data: info,
    })
        .then(res => {
            if (res.data > 0) {
                alert("添加成功");

                return;
            }
            else if (res.data == -1) {
                alert("不要重复添加会员");
                return;
            }
            else {
                alert("添加失败");
                return;
            }
        })
}
const img = (e: any) => {
    let obj = e.target.files[0];
    let f = new FormData();
    f.append("fl", obj);
    axios({
        url: 'https://localhost:7173/api/Img/Img',
        method: 'post',
        data: f,
    })
        .then(res => {

            console.log(res);
            if (res.data > 0) {
                alert("上传成功");
                return;
            }
            else if (res.data == "不是图片") {
                alert("不是图片");
                return;
            }
            else if (res.data == "图片不能大图2M") {
                alert("图片不能大图2M");
                return;
            }


        })

}
</script>

<style scoped></style>